import { saveDocument } from '@/services/ant-design-pro/documents';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Button, Input, InputRef, message, Modal } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'umi';
import './index.less';
const EditCom: React.FC<any> = (props: any) => {
  const { curDoc, versions, selVersionNo, documentUUID } = props.highClassWrite;
  const { TextArea } = Input;
  // const [title, setTitle] = useState<string>('');
  // const titleRef = useRef<InputRef>(null);
  const contentRef = useRef<InputRef>(null);
  const [docContent, setDocContent] = useState<string>('');
  const [textChange, setTextChange] = useState<boolean>(false); //文本是否改动过 改动后取消时要提示内容丢失

  useEffect(() => {
    if (curDoc) {
      // setTitle(curDoc.title);
      setDocContent(curDoc.content);
    }
  }, [curDoc]);
  //标题change
  // const changeTitle = (data) => {
  //   setTitle(data);
  //   setTextChange(true);
  // };
  //内容change
  const changeContent = (data: any) => {
    setDocContent(data);
    setTextChange(true);
  };
  const handleCancle = () => {
    if (textChange) {
      Modal.confirm({
        title: '您当前有未保存的内容?',
        icon: <ExclamationCircleOutlined />,
        content: '离开后修改的内容将丢失，是否离开？',
        onOk() {
          props.setEditMode(false);
          setTextChange(false);
          setDocContent(curDoc.content);
        },
        onCancel() {},
      });
    } else {
      props.setEditMode(false);
    }
  };
  //保存文档
  const handleSave = async () => {
    const params = {
      uuid: documentUUID,
      selected_version_no: selVersionNo,
      system_output: docContent,
      // title: title,
    };
    const res = await saveDocument(params);
    if (res.code === 0) {
      message.open({
        type: 'success',
        content: '保存文档成功',
      });
      props.setEditMode(false);
      setTextChange(false);
      props.getVersions(documentUUID);
    }
  };
  useEffect(() => {
    if (versions && versions.length > 0) {
      //更新到最新版本的内容
      props.setVersionNo(versions[0].version_no);
    }
  }, [versions]);
  //聚焦
  useEffect(() => {
    if (contentRef.current && docContent.length > 0) {
      // setTimeout(() => {
      //   contentRef.current!.focus({
      //     cursor: 'start',
      //   });
      // }, 1000);
    }
  }, [contentRef.current, docContent]);
  return (
    <div className="doc-edit-wrap">
      <div className="doc-edit-btn-box">
        <Button onClick={handleCancle}>取消</Button>
        <Button type="primary" onClick={handleSave}>
          保存
        </Button>
      </div>
      {/* <div className="doc-edit-title">
        <TextArea
          className="custom-textarea"
          ref={titleRef}
          value={title}
          bordered={false}
          onChange={(e) => changeTitle(e.target.value)}
          autoSize={{ minRows: 1 }}
        />
      </div> */}
      <div className="edit-cont-wrap">
        <TextArea
          className="custom-textarea"
          ref={contentRef}
          value={docContent}
          bordered={false}
          onChange={(e) => changeContent(e.target.value)}
          autoSize={{ minRows: 1, maxRows: 10000 }}
        />
      </div>
    </div>
  );
};

// export default EditCom;
export default connect(({ highClassWrite }) => ({ highClassWrite }))(EditCom);
